import React, { FC, useState, useEffect } from 'react'
import { Select, Input, Form, Button, Radio, Space, Modal, Flex, Segmented, List, Pagination, Switch } from 'antd'
import { fetchDcoosList } from '@/service/common'
import { getTenantDetail, verifySceneEncoding } from "@/service/apps";
import { DeleteOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
import type { NodePanelProps } from '@/app/components/workflow/types'
import type { RAGNodeType } from './types'
import useSWR from 'swr'
import useConfig from './use-config'
import Editor from './components/editor';
import Toast from '@/app/components/base/toast'

import { get‌Assistant‌List } from '@/service/tools';
import { getQueryParams } from '@/utils/getUrlParams';
import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows';
import { useAppContext } from '@/context/app-context';

const Panel: FC<NodePanelProps<RAGNodeType>> = ({
  id,
  data,
}) => {
  const {
    inputs,
    availableVars,
    availableNodesWithParent,
    handleSelectChange,
    handleParamsChange,
    handleProvChange,
    handleQueryChange,
    handleCreateType,
    handleIsChart
  } = useConfig(id, data)

  const [form] = Form.useForm();
  const [passwordVisible, setPasswordVisible] = useState('text')
  const { userProfile }: any = useAppContext()
  const [toastTitle, setToastTitle] = useState('')
  const [loading, setLodaing] = useState(false)
  const [knowledgeModal, setKnowledgeModal] = useState<boolean>(false)
  const [limit, setLimit] = useState<number>(5)
  const [current, setCurrent] = useState<number>(1)
  const [jobTypeName, setJobTypeName] = useState<string>('')
  const [knowledgeResult, setKnowledgeResult] = useState<any>([])
  const [showContent, setShowContent] = useState(false)
  const [options, setOptons] = useState([])
  const [userInput, setUserInput] = useState('')
  const { data: dcoosList } = useSWR(`/get-region-list`, fetchDcoosList)
  const [showType, setShowType] = useState('生产知识库')
  const [knowledgeArray, setKnowledgeArray] = useState<any>([])

  useEffect(() => {
    getKnowledgeArray()
  }, [current, limit, jobTypeName])

  useEffect(() => {
    let arr: any = []
    if (dcoosList) {
      Object.entries(dcoosList).map((item: any) => {
        arr.push({
          label: item[0],
          value: item[1]
        })
      })
      setOptons(arr)
    }
  }, [dcoosList])

  const verifySceneEncodingFun = async (name: string) => {
    setLodaing(true)
    try {
      await verifySceneEncoding({
        url: `/check-assistant-code?name=${name}`,
      }).then((data: any) => {
        const key = Object.keys(data)[0]
        if (key) {
          setLodaing(false)
          setPasswordVisible('password')
          setToastTitle('匹配完成')

          handleSelectChange(key, form.getFieldValue('job_type_name'))
        } else {
          setLodaing(false)
          setPasswordVisible('text')
          setToastTitle('匹配失败')
          Toast.notify({
            type: 'error',
            message: '任务类型名称错误',
          })
        }
      })
    } catch (e) {
      Toast.notify({
        type: 'error',
        message: '验证RAG场景编码接口调用失败',
      })
    }
  }

  const goTo = async () => {
    const consoleTokenFromLocalStorage = localStorage?.getItem('console_token')
    const category = getQueryParams('category');
    const tenantId = getQueryParams('tenant_id')
    const res: any = category !== 'area' && await getTenantDetail({ appId: tenantId })

    const param = {
      Authorization: consoleTokenFromLocalStorage,
      isRep: '0', //字典值：1代表查重，0代表不查重
      isPer: category === 'area' ? '1' : '0', //字典值：1代表个人空间，0代表项目空间
      createBy: category === 'area' ? '' : (res?.accounts?.map((record: any) => record.employee_number).join(';') || ''), //个人空间不需要这个字段
    }
    let url = `http://10.141.179.170:20021/knowledgebase?menu=ragClean&Authorization=${param.Authorization}&isPer=${param.isPer}&isRep=${param.isRep}`
    if (category !== 'area') {
      url = url + '&createBy=' + param.createBy
    }
    //history.pushState(null, '', url)
    window.location.href = url

  }

  useEffect(() => {
    (
      async () => {
        getKnowledgeArray()
        // if (inputs.self_build_rag === undefined) {
        //   handleCreateType(inputs.user_select_scene, inputs.job_type_name, '')
        // }
        if (inputs.params === undefined) {
          handleParamsChange('')
        }
      }
    )()
  }, [])
  const getKnowledgeArray = async (current1?: any, limit1?: any, showType1?: any) => {
    const currentValue = current1 || current
    const limitValue = limit1 || limit
    const showTypeValue = showType1 || showType
    current1 ? setCurrent(current1) : '';
    limit1 ? setLimit(limit1) : '';
    showType1 ? setShowType(showType1) : '';
    const ip = showTypeValue === '生产知识库' ? 'http://10.141.179.170:20050/' : 'http://10.141.179.170:20029/';
    let result: any = await get‌Assistant‌List(ip, { jobTypeName: jobTypeName, createBy: userProfile?.employee_number, pageNum: currentValue, pageSize: limitValue });
    if (result?.code + '' !== '200') {// || result?.total <= 0
      return;
    }

    const newRows = result?.rows?.map(item => {
      item.is_personal = showTypeValue === '生产知识库' ? 'false' : 'true';
      if (item.ragName === inputs?.self_build_rag?.ragName) {
        item.is_chart = inputs?.is_chart;

      };
      return item;
    });
    result.rows = newRows;
    console.log("---------------->newRows", newRows)
    setKnowledgeResult(result);
  }

  const changeResultRows = (code: string, is_chart: boolean) => {
    const newRows = knowledgeResult?.rows?.map(item => {
      if (item.ragName === code) {
        item.is_chart = is_chart;
      };
      return item;
    });
    setKnowledgeResult({ ...knowledgeResult, rows: newRows });
  }


  const publicValue = [
    { value: '2', label: '综维知识助手' },
    { value: '3', label: '无线网优知识助手' },
    { value: '7', label: '装维知识助手' },
    { value: '8', label: '规章制度助手' },
    { value: '9', label: 'IT运维知识助手' },
    { value: '11', label: '无线故障处置助手' },
    { value: '13', label: '统一/通用知识助手' },
  ];

  const getRAGValue = () => {
    // if (inputs.self_build_rag === 'build_rag') { //个人知识库
    //   return inputs.user_select_scene;
    // }
    // return inputs.job_type_name !== '' ? inputs.job_type_name : (toastTitle === '匹配完成' ? form.getFieldValue('job_type_name') : inputs.user_select_scene);
  }

  const selectKnowledge = (obj?: any) => {
    handleSelectChange(obj?.jobTypeCode || '');
    handleCreateType(obj);
    setKnowledgeArray(obj ? [obj] : [])
  }

  return (
    <div className='mt-2 mb-2 px-4 space-y-4'>
      {/* <div className='flex' style={{ flexDirection: 'column' }}>
        <Radio.Group
          onChange={(e) => { setShowType(e.target.value); handleCreateType((e.target.value === '生产知识库' ? publicValue : knowledgeArray)?.[0]?.value, '', e.target.value === '生产知识库' ? '' : 'build_rag') }}
          value={inputs.self_build_rag === 'build_rag' ? '个人知识库' : '生产知识库'}
          block
          style={{ margin: '4px 0' }}
          optionType="button"
          options={[
            {
              label: '生产知识库',
              value: '生产知识库'
            }, {
              label: '个人知识库',
              value: '个人知识库'
            }
          ]}
        />
        <div className='text-base mr-2.5' style={{
          fontSize: '13px',
          color: 'rgb(71 84 103 / var(--tw-text-opacity))',
          marginBottom: '8px',
          display: 'flex',
          justifyContent: 'space-between',
        }}>

          <p>RAG场景类型:</p>
          {
            inputs.self_build_rag === 'build_rag' ?
              <p style={{ cursor: !showContent ? 'pointer' : 'no-drop', color: !showContent ? 'rgb(21,94,239)' : 'gray' }}
                onClick={() => {
                  goTo()
                }}>
                <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>去创建知识库<ArrowNarrowLeft className='w-3 h-3 rotate-180' /></div>
              </p>
              :
              <p style={{ cursor: !showContent ? 'pointer' : 'no-drop', color: !showContent ? 'rgb(21,94,239)' : 'gray' }}
                onClick={() => {
                  setShowContent(true)
                  setUserInput(inputs.user_select_scene)
                }}>+配置个人知识库RAG</p>
          }
        </div>
        <Select
          disabled={showContent}
          className='flex-1'
          placeholder='选择RAG场景类型'
          style={{ width: '100%' }}
          value={inputs.job_type_name !== '' ? inputs.job_type_name : (toastTitle === '匹配完成' ? form.getFieldValue('job_type_name') : inputs.user_select_scene)}
          onChange={(e: any) => handleSelectChange(e, '')}
          options={inputs.self_build_rag === 'build_rag' ? knowledgeArray : publicValue}
        />
      </div> */}
      <div>
        <div className='mt-4 text-sm font-semibold text-gray-800'>
          <div>知识库选择

            <a onClick={goTo} style={{ float: 'right', fontSize: '12px', fontWeight: '500', color: 'rgb(27, 102, 255)', cursor: 'pointer' }}>
              <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>去创建知识库<ArrowNarrowLeft className='w-3 h-3 rotate-180' /></div>
            </a>
          </div>
          <Input placeholder='未配置知识库,请选择' allowClear onClear={() => selectKnowledge(undefined)} prefix={<Space>
            <SearchOutlined onClick={() => setKnowledgeModal(true)} />
            {/* <CloseCircleOutlined onClick={() => setKnowledgeValue([])} /> */}
          </Space>
          } value={knowledgeArray?.[0]?.jobTypeName || inputs?.self_build_rag?.jobTypeName || ''} />
        </div>

      </div>
      {showContent &&
        <div style={{ marginTop: '25px', position: 'relative' }}>
          <Form
            form={form}
            onFinish={() => {
              verifySceneEncodingFun(form.getFieldValue('job_type_name'))
            }}
            onReset={() => {
              form.resetFields()
              setShowContent(false)
              setLodaing(false)
              setToastTitle('')
              setPasswordVisible('text')
              handleSelectChange(userInput, inputs.job_type_name)
            }}
          >
            <Form.Item name='job_type_name' rules={[{ required: true, message: '请填写任务类型名称' }]}>
              <label style={{ fontSize: '13px' }}>
                <div style={{ marginBottom: '8px', display: 'flex' }}>
                  <p>任务类型名称:</p>
                  {toastTitle === '' ? null : <p style={toastTitle === '匹配完成' ? { color: ' ', marginLeft: '10px' } : { color: 'red', marginLeft: '10px' }}>{toastTitle}</p>}
                </div>
                <Input />
              </label>
            </Form.Item>
            {/* <Form.Item name='user_select_scene' rules={[{ required: true, message: '请填写任务类型编码' }]}>
              <label style={{ fontSize: '13px' }}>
                <div style={{ marginBottom: '8px', display: 'flex' }}>
                  <p>任务类型编码:</p>
                  {toastTitle === '匹配完成' ? <p style={{ marginLeft: '10px' }}> <DeleteOutlined
                    onClick={() => {
                      form.resetFields()
                      setLodaing(false)
                      setToastTitle('')
                      setPasswordVisible('text')
                      handleSelectChange(userInput, '')
                    }} style={{ cursor: 'pointer' }} /></p> : null}
                </div>
                <Input type={passwordVisible} />
              </label>
            </Form.Item> */}
            <Form.Item>
              <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
                <Button htmlType='submit' type='primary' loading={loading}>{loading ? '校验中' : '确定'}</Button>
                <Button htmlType='reset'>取消</Button>
              </div>
            </Form.Item>
          </Form>
          {
            loading && <div className='dots'>校验中</div>
          }
        </div>
      }
      <div>
        <div className='text-base mr-2.5' style={{ fontSize: '13px', color: 'rgb(71 84 103 / var(--tw-text-opacity))', marginBottom: '8px' }}>用户查询知识库的问题</div>
        <Editor
          value={inputs.query}
          onChange={handleQueryChange}
          nodesOutputVars={availableVars}
          availableNodes={availableNodesWithParent}
        />
      </div>
      <div>
        <div className='text-base mr-2.5' style={{ fontSize: '13px', color: 'rgb(71 84 103 / var(--tw-text-opacity))', marginBottom: '8px' }}>额外参数</div>
        <Editor
          value={inputs.params}
          onChange={handleParamsChange}
          nodesOutputVars={availableVars}
          availableNodes={availableNodesWithParent}
        />
      </div>
      {/* <div>
        <div className='text-base mr-2.5' style={{ fontSize: '13px', color: 'rgb(71 84 103 / var(--tw-text-opacity))', marginBottom: '8px' }}>省份编码</div>
        {options &&
          <Select
            placeholder="请输入省份编码"
            onChange={(e: any) => {
              handleProvChange(e)
            }}
            value={inputs.prov}
            showSearch
            style={{ width: '100%' }}
            options={options}
            optionFilterProp="label"
          />
        }
      </div> */}
      <Modal
        title={'选择知识库'}
        open={knowledgeModal}
        onOk={() => setKnowledgeModal(false)}
        width={'720px'}
        mask={false}
        onCancel={() => setKnowledgeModal(false)}
        footer={null}
      >
        <div>
          <Flex justify='center' >
            <Segmented
              onChange={(e) => getKnowledgeArray(0, 5, e)}
              options={[
                {
                  label: '生产知识库',
                  value: '生产知识库'
                }, {
                  label: '个人知识库',
                  value: '个人知识库'
                }
              ]}
            />
          </Flex>
          <Input onPressEnter={(e) => setJobTypeName(e?.target?.value)} style={{ maxWidth: '360px', margin: '16px 4px 0 4px' }} size='small' placeholder='请输入知识库名称查找' />
          <List
            dataSource={knowledgeResult.rows}
            header={
              <table>
                <thead className="">
                  <tr>
                    <td width={360}>任务类型</td>
                    <td width={80}>省份</td>
                    <td width={360}>是否开启知识图谱检索</td>
                    <td width={80}>操作</td>
                  </tr>
                </thead>
              </table>
            }
            renderItem={(item) => (
              <List.Item>
                <table className={` min-w-[440px] w-full max-w-full border-collapse border-1 rounded-lg text-sm`}>

                  <tbody className="text-gray-700 border-gray-200 mineTbody">
                    <tr>
                      <td width={360}>{item?.jobTypeName}</td>
                      <td width={80}>{item?.regionName}</td>
                      <td width={360}>
                        <Switch value={item?.is_chart} onClick={e => {
                          changeResultRows(item?.ragName, e);
                          item.ragName === (knowledgeArray?.[0]?.ragName || inputs?.self_build_rag?.ragName) ? handleIsChart(e) : '';
                        }} size={'md'} />
                      </td>
                      <td width={80}>
                        {
                          item.ragName === (knowledgeArray?.[0]?.ragName || inputs?.self_build_rag?.ragName) ?
                            <a style={{ color: 'green' }} onClick={(e) => { handleSelectChange('', ''); selectKnowledge(item); setKnowledgeModal(false); }}><PlusOutlined />已添加</a>
                            :
                            <a onClick={(e) => { handleSelectChange(item?.jobTypeCode, ''); selectKnowledge(item); setKnowledgeModal(false); }}><PlusOutlined />添加</a>
                        }
                      </td>
                    </tr>
                  </tbody>
                </table>
              </List.Item>
            )}
            footer={<Space>
              <Pagination hideOnSinglePage showQuickJumper showTotal={() => `共有${knowledgeResult.total}条`} pageSize={limit} current={current} total={knowledgeResult?.total} onChange={(page, pageSize) => { setLimit(pageSize); setCurrent(page); }} />
            </Space>
            }
          />
        </div>
      </Modal>
    </div >
  )
}

export default React.memo(Panel)
